<template>
  <div>
    <el-table
      :cell-style="tablestyle"
      :header-cell-style="tablestyle"
      :data="viewData"
      style="width: 100%">
      <el-table-column
        width="150"
        show-overflow-tooltip
        label="项目名称"
        prop="title">
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        label="创建人"
        prop="founderName">
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.founderName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目状态"
        prop="status">
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop='startTime'>
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="到期时间"
        prop="endTime">
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="人数"
        prop="peopleNumber">
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.peopleNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="缺陷数"
        prop="bugNumber">
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.bugNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180"
        align="right"
      >
        <template  slot-scope="scope">
          <span @click="enterPro(scope.row)"><el-link type="primary" :underline="false">进入项目</el-link></span>
          <span @click="editPro(scope.row)" v-show="scope.row.founderId === userInfo.id && scope.row.status !== '已结项'">
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false">编辑</el-link>
          </span>
          <span @click="Knot(scope.row)" v-show="scope.row.founderId === userInfo.id && scope.row.status !== '已结项'">
            <el-divider direction="vertical"></el-divider>
            <el-link v-show="scope.row" type="primary" :underline="false">结项</el-link>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        :page-sizes="[5, 7, 10, 15]"
        prev-text="上一页"
        next-text="下一页"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <!-- 结项的弹窗 -->
    <el-dialog
      :visible.sync="knotDialogVisible"
      width="30%">
      <span>
        <el-result icon="warning" title="警告,结项是不可逆的！是否继续">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="dialogSureKnot">确认</el-button>
            <el-button size="medium" @click="knotDialogVisible = false">取消</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getProjectsByCondition , getProjectsByUserId, projectKnot, getProjectByProjectIdAndUserId } from '@/api/project'
import project from '@/store/modules/project'
import { debounce } from '@/utils'

  export default {
    name: 'protable',
    data() {
      return {
        test: '已结项',
        pagesize: 5,        //分页每一页的数目
        currentPage: 1,     //标记当前的在第几页
        total: 5,
        viewData: [],
        proData: [],
        knotDialogVisible: false,    //结项的警告弹窗
        project: {},                 //当前绑定的project
      }
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    mounted() {
      let params = {"current":1,"size":this.pagesize}
      this.getProjects(params)
    },
    methods: {
      //分页条改变时调用的方法
      handleCurrentChange(val) {
        this.currentPage = val
        let params = {"current":this.currentPage,"size":this.pagesize}
        this.getProjects(params)
      },
      //修改每页数量多少时调用
      handleSizeChange(val){
        this.pagesize = val
        let params = {"current":this.currentPage,"size":this.pagesize}
        this.getProjects(params)
      },
      //点击进入项目执行的方法
      enterPro(row){
         getProjectByProjectIdAndUserId({id:row.id,userId:this.userInfo.id}).then(res =>{
          this.$store.dispatch('project/setProject',{id:row.id,role:res.data.role});
          this.$router.push({name:'BugManage',query:{project:row}});
          this.$store.dispatch('app/closeSider');
        })
      },
      //点击编辑执行的方法
      editPro(row){
        let arr=JSON.stringify(row)
        this.$router.push("/createPro?obj="+encodeURIComponent(arr))
      },
      //点击结项调用的方法
      Knot(row){
        this.knotDialogVisible = true
        this.project = row
      },
      //select筛选方法
      selectFilterData(value) {
        if (value === "所有状态"){
          let params = {"current":this.currentPage,"size":this.pagesize}
          this.getProjects(params)
          return ;
        }
        let params = {"current":this.currentPage,"size":this.pagesize}
        let project = {}
        this.$set(project,"status",value)
        this.getProjectsSelect(params,project)
      },
      //只显示自己项目的筛选方法
      checkFilterData(value){
        if (value){
          let params = {"current":this.currentPage,"size":this.pagesize}
          let project = {}
          this.$set(project,"founderId",this.userInfo.id)
          this.getProjectsSelect(params,project)
        }else{
          let params = {"current":1,"size":this.pagesize}
          this.getProjects(params)
        }
      },
      //查看项目详情
      checkDetails(row){
        this.$parent.drawerProInformationChange(row)
      },
      //获取表格信息重载，控制分页的这个
      getProjects(params){
        this.loading = true;
        getProjectsByUserId(this.userInfo.id,params).then(res =>{
          for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].startTime = res.data.records[i].startTime.substring(0,10)
            res.data.records[i].endTime = res.data.records[i].endTime.substring(0,10)
          }
          this.viewData = res.data.records
          this.total = res.data.total
          this.$parent.proNumber = res.data.total
        }).catch(error =>{
          console.log(error)
        })
        this.loading = true;
      },
      //根据条件筛选获取表格项目信息
      getProjectsSelect(params,project){
        getProjectsByCondition(this.userInfo.id,params,project).then(res =>{
          for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].startTime = res.data.records[i].startTime.substring(0,10)
            res.data.records[i].endTime = res.data.records[i].endTime.substring(0,10)
          }
          this.viewData = res.data.records
          this.total = res.data.total
          this.$parent.proNumber = res.data.total
        })
      },
      //表格文字居中返回方法
      tablestyle(){
        return "text-align:left;"
      },
      //确定结项后的方法
      dialogSureKnot(){
        projectKnot({'id':this.project.id}).then(res =>{
          this.$message({type: 'success',message: res.msg})
          this.knotDialogVisible = false
          let params = {"current":this.current,"size":this.pagesize}
          this.getProjects(params)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .block {
    margin-top: 30px;
  }

   .pagination {
    margin-top: 20px;
    margin-right: 10px;
    text-align: right;
     ::v-deep .el-pagination__jump {
       float: left;
     };
     ::v-deep .el-pagination__total {
       float: left;
     };
     ::v-deep .el-pagination__sizes {
       float: left;
     }
  }
</style>
